<template>
  <div class="righttop" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    var chartDom = document.querySelector(".righttop");
    var myChart = echarts.init(chartDom);
    var myColor = ["#1089e7", "#f57474", "#05c2de", "#f8b448", "#8b78f6"];
    let option = {
      title: {
        text: "大洲感染总人数趋势图",
        //  居中对齐
        textAlign: "center",
        //  标题水平位置
        left: "50%",
        textStyle: {
          fontSize: "10",
          color: "#ffffff",
           // 字体加粗
          fontWeight:"normal",
        },
      },
      //  x轴
      xAxis: {
        //   是否显示x轴
        show: false,
        //  设置X轴为数值轴
        type: "value",

      },
      //  y轴
      yAxis: [
        //  两个坐标轴
        {
          //  类目轴显示的内容
          data: ["美国", "西班牙", "哥伦比亚", "英国", "意大利"],
          // 当前坐标轴为类目轴
          type: "category",
          //   是否显示y刻度
          axisTick: {
            show: false,
          },
          //   是否显示y轴线
          axisLine: {
            show: false,
          },
          // 是否反转y轴
          inverse: true,
          axisLabel: {
            //  标签文字颜色
            color: "#ffffff",
          },
        },

        {
          //  类目轴显示的内容
          data: ["美国", "西班牙", "哥伦比亚", "英国", "意大利"],
          // 当前坐标轴为类目轴
          type: "category",
          //   类目轴是否显示
          show: false,
          // 是否反转y轴
          inverse: true,
          axisLabel: {
            //  标签文字颜色
            color: "#ffffff",
          },
        },
      ],
      // 网格
      grid: {
        top: "20%",
        left: "20%",
        right: "10%",
        bottom: "10%",
      },
      // 系列
      series: [
        {
          //  柱状图
          type: "bar",
          //  柱子的宽度[粗细]
          barWidth: 19,
          data: [
            { name: "美国", value: 100 },
            { name: "西班牙", value: 100 },
            { name: "哥伦比亚", value: 100 },
            { name: "法国", value: 100 },
            { name: "秘鲁", value: 100 },
          ],
          //  柱形图的样式
          itemStyle: {
            //  柱子没有填充颜色
            color: "none",
            //  柱子的边框颜色
            borderColor: "#00c1de",
            //  柱子边框宽度
            borderWidth: 3,
            //   柱子圆角
            borderRadius: 20,
          },
          //   系列属于某个类目轴
          yAxisIndex: 0,
        },
        {
          //  柱状图
          type: "bar",
          data: [77.7, 58.1, 92, 10,  28],
          //  柱子的宽度[粗细]
          barWidth: 13,
          itemStyle: {
            borderRadius: 20,
            color: function (params) {
              return myColor[params.dataIndex];
            },
          },
          //     重要!!!!!!!!!!!!!!!!!!!!!!
          yAxisIndex: 1,
          //  标签
          label: {
            //  是否显示柱状图标签
            show: true,
            //  标签文字颜色
            color: "#ffffff",
            formatter: function (params) {
              //   标签内容格式
              return params.value + "%";
            },
          },
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped> 
</style>